<template>
  <div style="background: #fff">
    <div class="title">
      <div>商户详情</div>
    </div>
    <div class="content">
      <el-form label-width="100px">
        <el-form-item label="店铺封面">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in [item.cover]"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, false)"
                  ></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :on-success="uploadCover"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        请上传1张750*320的图片，JPG或PNG格式
        </el-form-item>
        <el-form-item label="店铺logo">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in [item.logo]"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, false)"
                  ></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :on-success="uploadLogo"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          请上传1张200*200的图片，JPG或PNG格式
        </el-form-item>

        <el-form-item label="轮播图片">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in item.photo"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, true)"
                  ></i>
                  <i class="el-icon-delete icon" @click="remove(index)"></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :multiple="true"
              :on-success="uploadPhoto"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          请上传最多9张750*320的图片，JPG或PNG格式
        </el-form-item>
        <el-form-item label="分享海报">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in [item.poster]"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, false)"
                  ></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :on-success="uploadPoster"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          请上传1张750*750的图片，JPG或PNG格式
        </el-form-item>
        <el-form-item label="商家名称">
          <el-input v-model="item.shop_name"></el-input>
        </el-form-item>
        <el-form-item label="商家电话">
          <el-input v-model="item.phone"></el-input>
        </el-form-item>
        <el-form-item label="特色">
          <el-input v-model="item.des" ></el-input>
        </el-form-item>
         <!-- <el-form-item label="店铺简介">
          <el-input v-model="item.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="简介图片">
          <div style="display: flex">
            <div
              class="demo-upload-list"
              v-for="(item, index) in [item.picture]"
              :key="index"
            >
              <template>
                <img
                  :src="
                    cdn +
                    item +
                    '?imageView2/1/w/100/h/100/format/webp/q/75|imageslim'
                  "
                />
                <div class="demo-upload-list-cover">
                  <i
                    class="el-icon-view icon"
                    @click="preview(item, index, false)"
                  ></i>
                </div>
              </template>
            </div>

            <el-upload
              class="avatar-uploader"
              action="http://upload.qiniup.com"
              :show-file-list="false"
              :on-success="uploadPicture"
              :data="qnToken"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
           格式为jpg png
        </el-form-item> -->
        <el-form-item label="商家关键字">
          <el-input v-model="item.key_word"></el-input>
        </el-form-item>
        <el-form-item label="营业面积">
          <el-input v-model="item.area"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="item.address"></el-input>
        </el-form-item>
        <el-form-item label="营业开始时间">
          <el-time-picker
            value-format="HH:mm"
            v-model="item.start_at"
            start-placeholder="开始时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="营业结束时间">
          <el-time-picker
            value-format="HH:mm"
            v-model="item.end_at"
            start-placeholder="结束时间"
          >
          </el-time-picker>
        </el-form-item>

        <!-- <el-form-item label="经度">
          <el-input v-model="item.lon"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="item.lat"></el-input>
        </el-form-item> -->
        <el-form-item label="折扣模式">
          <el-radio v-model="item.discount_mode" :label="1">全单折扣</el-radio>
          <el-radio v-model="item.discount_mode" :label="2">部分折扣</el-radio>
        </el-form-item>
        <el-form-item label="折扣">
          <el-select v-model="item.discount" placeholder="选择">
            <el-option
              v-for="item in discount"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          {{ item.discount / 10 }}折
        </el-form-item>
        <el-form-item label="折扣备注">
          <el-input v-model="item.discount_tips"></el-input>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select
            disabled
            v-model="item.one_id"
            placeholder="选择"
            @change="setItemOne"
          >
            <el-option
              v-for="item in one"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select   disabled v-model="item.two_id" placeholder="选择">
            <el-option
              
              v-for="item in two"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务费(%)">
          <el-input v-model="item.rate" disabled></el-input>
        </el-form-item>
        
        <el-form-item>
          <!-- <el-button>取消</el-button> -->
          <el-button type="primary " @click="confirm">确定</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog title="预览" :visible.sync="previewModal" center>
      <!-- <img :src="cdn+img" alt=""> -->
      <el-image :src="cdn + img" lazy></el-image>
      <el-button
        v-if="showFoot"
        type="primary"
        @click="setImgIndex(previewIndex)"
        >设为首图</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import mixin from "../../js/mixin";

export default {
  name: "homePage",
  mixins: [mixin],
  data() {
    return {
      is_check: false,
      is_page: false,
      api_url: "account",
      one: [],
      two: [],
      city: [],
      area: [],
      item: {
        discount:95
      },
      discount: [95, 90, 88, 85, 80],
      query: {},
    };
  },
  components: {},
  mounted() {},
  created() {
   
    
    this.init();
  },
  methods: {
    init() {
      this.getItem();
      this.getCate();
      this.getQnToken();
    },

    getItem() {
      this.global.httpRequest(this.api_url, { is_self: true }).then((res) => {
        this.item = res;
        if (this.item.one_id) {
          this.getItemTwo();
        }
        if (this.item.city_id) {
          this.getArea();
        }
      });
    },
    getCate() {
      this.global.httpRequest("shop/cate", { p_id: 0 }).then((res) => {
        this.one = res;
      });
    },

    confirm() {
      if(this.item.photo.length>9){
         this.$message({
          type: 'error',
          message: '轮播最多上传9张'
        })
        return
      }
      this.global.httpRequest(this.api_url, this.item, "put").then((res) => {});
    },
  },
};
</script>

<style scoped>
</style>